<template>
  <!-- 环形图1 -->
  <div id="huan1" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";

function initChart() {
  var chartDom = document.getElementById("huan1");
  var myChart = echarts.init(chartDom);

  myChart.setOption({
    title: {
      text: "居民年龄构成",
    },
    tooltip: {
      trigger: "item",
    },
    // 图例
    legend: {
      // show:false
      //   top: "5%",
      orient: "horizontal",
      left: "center",
      icon: "circle", //图例的形状
      x: "center",
      y: "bottom",
      itemGap: 20, //数据上下的距离
    },
    //中间显示字，有偏移量
    graphic: [
      {
        //环形图中间添加文字
        type: "text", //通过不同top值可以设置上下显示
        left: "center",
        top: "50%",
        style: {
          text: "1000", //（自己设置显示内容）,
          textAlign: "center",
          fill: "#000", //文字的颜色
          width: 30,
          height: 30,
          fontSize: 20,
          color: "#4d4f5c",
          fontFamily: "Microsoft YaHei",
        },
      },
      {
        type: "text",
        left: "center",
        top: "45%",
        style: {
          text: "居民总数",
          textAlign: "center",
          fill: "#000",
          width: 30,
          height: 30,
          fontSize: 20,
        },
      },
    ],

    series: [
      {
        name: "居民学历构成",
        type: "pie",
        radius: ["40%", "60%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },

        data: [
          { value: 100, name: "10岁一下" },
          { value: 240, name: "10-30岁" },
          { value: 120, name: "30-40岁" },
          { value: 120, name: "40-50岁" },
          { value: 340, name: "50岁以上" },
        ],
      },
    ],
  });
  myChart.resize();
  window.onresize = function () {
    console.log("窗口尺寸发生变化");
    //自适应大小
    myChart.resize();
  };
}

onMounted(() => {
  setTimeout(() => {
    initChart();
  }, 0);
});

onUnmounted(() => {
  echarts.dispose;
});
</script>
<style lang="scss" scoped>
</style>
